<template>
  <section class="main-page">
		<div class="left-menu">
			<img :src="menuImageIconFlag ? 'static/image/mainPage/menu-open.png' : 'static/image/mainPage/menu-unopen.png'" alt="" @click="leftMenuIconClick">
			<div :class="menuImageIconFlag ? 'menu-div' : 'menu-div opacity0'">
				<div :class="currentTopMenu ? 'menu-item' : 'menu-item another'" v-for="(item, index) in menuArray" :key="index">
					<div :class="activeMenu === item.label ? 'point active-point' : 'point'"></div>
					<div v-if="currentTopMenu" :class="activeMenu === item.label ? 'content active-content' : 'content'" @click="menuContentCLick(item.label)">{{item.label}}</div>
					<div v-if="!currentTopMenu" :class="activeMenu === item.label ? 'content-another active-content' : 'content-another'" @click="workMenuClick(item.label)">{{item.label}}</div>
					<img v-if="item.label === 'WeChart'" :class="hoverWeixinFlag ? 'hover-image hover-image-weixin opacity1' : 'hover-image hover-image-weixin'" src="static/image/mainPage/weixin.png" alt="">
					<img v-if="item.label === 'E-mail'" :class="hoverEmailFlag ? 'hover-image hover-image-email opacity1' : 'hover-image hover-image-email'" src="static/image/mainPage/email.png" alt="">
				</div>
			</div>
		</div>
		<div class="top-menu">
			<div class="menu-item menu-top" v-for="(item, index) in topMenuArray" :key="index" @click="topMenuClick(item.label)">
				<div :class="currentTopMenu === item.label ? 'point show' : 'point unShow'"></div>
				<div :class="currentTopMenu === item.label ? 'content selected' : 'content'">{{item.label}}</div>
			</div>
		</div>
		<div class="move-hover move-hover-right" @mouseover="hoverMove('right')"></div>
		<router-view ref="activeRouter"/>
	</section>
</template>
<script>
import { hasClass } from 'common/common'
export default {
	data () {
		return {
			hoverWeixinFlag: false,
			hoverEmailFlag: false,
			menuImageIconFlag: true,
			currentTopMenu: 'Collection',
			menuArray: [
				{label: 'WeChart'},
				{label: 'E-mail'},
			],
			collectionMenuArray: [
				{label: 'WeChart'},
				{label: 'E-mail'},
			],
			activeMenu: '',
			workMenuArray: [
				{label: '华夏官网'},
				{label: '拳友官网'},
				{label: '哈云官网'},
				{label: '手机端'},
				{label: '手绘'},
			],
			topMenuArray: [
				{label: 'Collection'},
				{label: 'Introduction'},
			]
		}
	},
	mounted() {
		document.addEventListener('click', this.closeEmail);
		if (location.href.indexOf('works') > 0) {
			this.menuArray = this.workMenuArray;
			this.currentTopMenu = '';
			this.activeMenu = '华夏官网';
		} else if (location.href.indexOf('introduction') > 0) {
			this.currentTopMenu = 'Introduction';
		}
		this.$bus.on('imgCardClick', data => {
			this.currentTopMenu = '';
			this.activeMenu = data.name;
			this.menuArray = this.workMenuArray;
			this.$router.push({
				name: 'works',
				params: {
					label: data.name
				}
			});
		});
	},
	methods: {
		// 顶部菜单点击事件
		topMenuClick(label) {
			this.menuArray = this.collectionMenuArray;
			this.currentTopMenu = label;
			this.activeMenu = '';
			this.$router.push(label.toLocaleLowerCase());
		},
		// 左侧菜单点击事件
		workMenuClick(label) {
			this.activeMenu = label;
			this.$bus.emit('worksMenuClick', label);
		},
		// 左侧菜单图标点击事件
		leftMenuIconClick() {
			this.menuImageIconFlag = !this.menuImageIconFlag
		},
		menuContentCLick(label) {
			this.activeMenu = label;
			if (label === 'WeChart') {
				this.hoverWeixinFlag = !this.hoverWeixinFlag;
				this.hoverEmailFlag = false;
			} else if (label === 'E-mail') {
				this.hoverEmailFlag = !this.hoverEmailFlag;
				this.hoverWeixinFlag = false;
			}
		},
		closeEmail(event) {
			if (hasClass(event.target, 'content')) return;
			if (hasClass(event.target, 'content-another')) return;
			if (event.target.localName === 'img') return;
			if (document.querySelector('.works')) return;
			this.activeMenu = '';
			this.hoverWeixinFlag = false;
			this.hoverEmailFlag = false;
		},
		// 右侧hover移动
		hoverMove(type) {
			this.$bus.emit('hoverMover', type);
		}
	},
	beforeDestroy() {
		document.removeEventListener('click', this.closeEmail);
		this.$bus.off('imgCardClick');
	}
}
</script>
<style lang='less' scoped>
	.main-page {
		position: relative;
		display: flex;
		height: 100vh;
		background-color: #f5f5f5;
		.left-menu {
			position: absolute;
			top: 4%;
			left: 3%;
			z-index: 2;
			img {
				width: 3rem;
				z-index: 5;
				position: relative;
				cursor: pointer;
			}
			.menu-item {
				width: 1rem;
				height: 6rem;
				margin-top: 1rem;
				cursor: pointer;
				.point {
					position: relative;
					left: 0.15rem;
					width: .7rem;
					height: .7rem;
					background: rgba(89,89,89,1);
					border-radius: 50%;
				}
				.content {
					margin-top: .3rem;
					white-space: nowrap;
					font-size: 1.5rem;
					font-family: PingFangSC-Medium;
					font-weight: 500;
					color: rgba(140,140,140,1);
					line-height: 15px;
					transform: rotate(90deg);
				}
				.content-another {
					font-size: 1.5rem;
					left: -.1rem;
					position: relative;
					margin-top: .3rem;
				}
				.hover-image {
					/* Safari and Chrome */
					-webkit-transition: all .8s ease-in-out;
					/* Firefox 4 */
					-moz-transition: all .8s ease-in-out;
					/* Opera */
					-o-transition: all .8s ease-in-out;
					transition: all .8s ease-in-out;
					position: absolute;
					width: 20rem;
					margin-left: 1.7rem;
					left: 1.2rem;
					opacity: 0;
					pointer-events:none;
				}
				.hover-image-weixin {
					top: -.8rem;
				}
				.hover-image-email {
					top: 4.5rem;
				}
			}
			.another {
				height: auto;
			}
			.active-point {
				background:  #409EFF !important;
			}
			.active-content {
				color: #409EFF !important;
			}
			.menu-div {
				opacity: 1;
				/* Safari and Chrome */
        -webkit-transition: all .8s ease-in-out;
        /* Firefox 4 */
        -moz-transition: all .8s ease-in-out;
        /* Opera */
        -o-transition: all .8s ease-in-out;
        transition: all .8s ease-in-out;
			}
			.opacity0 {
				opacity: 0;
			}
			.opacity1 {
				opacity: 1 !important;
			}
		}
		.top-menu {
			z-index: 1;
			width: 100%;
			position: absolute;
			top: 5%;
			display: flex;
			justify-content: center;
			align-items: center;
			.menu-item {
				cursor: pointer;
				margin-left: 2rem;
				display: flex;
				justify-content: center;
				align-items: center;
				.point {
					width: .8rem;
					height: .8rem;
					border-radius:50%;
				}
				.content {
					margin-left: .5rem;
					font-size: 2.5rem;
					font-family: Arial-BoldMT;
					font-weight: bold;
					color:rgba(140,140,140,1);
				}
				.selected {
					color: rgba(38,38,38,1);
				}
				.show {
					background:rgba(38,38,38,1);
				}
				.unShow {
					background: transparent !important;
				}
			}
		}
		.move-hover {
			position: fixed;
			width: 10rem;
			height: 100vh;
			z-index: 5;
		}
		.move-hover-right {
			right: 0;
		}
	}
	.menu-top:hover {
		.point {
			background:  #409EFF !important;
		}
		.content {
			color: #409EFF !important;
		}
		.content-another {
			color: #409EFF !important;
		}
	}
</style>
